<template>
    <div class="left-side">
         <el-menu  class="el-menu-vertical-demo" :default-active="onRoutes" unique-opened router background-color="#12446b"
      text-color="#fff"
      active-text-color="#ffd04b">
            <template v-for="item in items">
                <template v-if="item.children">
                    <el-submenu :index="item.index" :key="item.index">
                         <template slot="title">
                            <i :class="item.icon"></i>
                            <span class="sb-cn">{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(child,i) in item.children" :key="i" :index="child.index">
                            {{child.title}}
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span class="sb-cn">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name:'leftSide',
        data(){
            return{
                 items: [
                    {
                        icon: 'iconfont icon-daohangshouye',
                        index: 'index',
                        title: '首页'
                    },
                    {
                        icon:'iconfont icon-youxi',
                        index:'2',
                        title:'游戏列表',
                        children:[
                            {
                                index:'pageContent',
                                title:'网页内容维护'
                            },
                            {
                                index:'gameManage',
                                title:'游戏管理'
                            },
                            {
                                index:'gameGift',
                                title:'礼包'
                            },
                        ]
                    },
                    {
                        icon:'iconfont icon-xitong',
                        index:'3',
                        title:'系统功能',
                        children:[
                            {
                                index:'source',
                                title:'素材库'
                            },
                            {
                                index:'system',
                                title:'系统功能'
                            }
                        ]
                    }
                ]
            }
        },
        computed:{
            onRoutes(){
                return this.$route.path.replace('/','');
            }
        }
    }
</script>

<style scoped>
    .iconfont{
        margin-right: 8px;
        position: relative;
        top: -2px;
    }
    .el-submenu__title i{
        font-size:16px;
        color:#fff;
    }
    .el-menu{
        border-right:0;
    }
    .left-side{
        position: fixed;
        top: 64px;
        left: 0;
        width:200px;
        min-height: 100%;
        background-color: #12446b;
        z-index: 99;
        color:#fff;
        text-align:left;
    }
    .el-submenu .el-menu-item{
        min-width:auto;
    }
    .el-submenu .el-menu{
        border-right: solid 1px #e6e6e6;
    }
</style>